<script lang="ts" setup>
import { provide, ref } from 'vue';

const props = withDefaults(
	defineProps<{
		defaultActiveKey?: string | number;
		direction?: string;
	}>(),
	{
		direction: 'horizontal',
		defaultActiveKey: '0'
	}
);
const emit = defineEmits(['change']);
const activeKey = ref(props.defaultActiveKey);
const tabs = ref([]);

const handleSelect = (key: string) => {
	activeKey.value = key;
	emit('change', key);
};

provide('tabs', tabs);
</script>

<template>
	<view class="um-tabs">
		<view :class="{ 'um-tabs__title': true, 'um-tabs__vertical': direction === 'vertical' }">
			<view :class="{ item: true, active: activeKey === item.key }" v-for="item in tabs" @tap="handleSelect(item.key)">
				{{ item.title }}
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.um-tabs {
	background-color: #fff;
	padding: 0 24rpx 12rpx;

	&__title {
		display: flex;
		white-space: nowrap;
		overflow-x: auto;
		gap: 32rpx;

		&::-webkit-scrollbar {
			display: none;
		}

		.item {
			height: 50rpx;
			display: flex;
			align-items: flex-end;
		}

		.active {
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	&__vertical {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
}
</style>
